<template>
	<view class="content">
		<div class="content-top">
			<image class="logo" :src="configs.avatarUrl + '/' + user.id + '.jpg'"></image>
			<view class="name">
				{{user.name}}
			</view>
			
			<view class="userTab">
				<u-subsection mode="subsection" :list="tablist" :current="isMeetting"
					@change="sectionChange"></u-subsection>
			</view>
			<view class="text-area btn-group margin-bottom" v-if="!isMeetting">
				<button class="cu-btn bg-green margin-right" @tap="handleCall('voice')">拨打语音</button>
				<button class="cu-btn bg-green " @tap="handleCall('video')">拨打视频</button>
			</view>
			<view class="text-area btn-group margin-bottom" v-else>
				<!-- <button class="cu-btn bg-olive margin-right" @tap="handleCalls('voices')">语音会议</button> -->
				<button class="cu-btn bg-olive " @tap="handleCalls('videos')">会议</button>
			</view>
		</div>
		

		<view class="userList" v-if="!isMeetting">
			<u-radio-group v-model="id" :borderBottom="true" placement="column" iconPlacement="right">
				<u-radio v-if="item.id != user.id" :customStyle="{marginBottom: '16px'}" v-for="item in userList"
					:name="item.id" :label="item.name"></u-radio>
			</u-radio-group>
		</view>
		<view class="userList" v-else>
			<u-checkbox-group v-model="ids" :borderBottom="true" placement="column" iconPlacement="right">
				<u-checkbox v-if="item.id != user.id" :customStyle="{marginBottom: '16px'}" v-for="item in userList"
					:name="item.id" :label="item.name"></u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	import configs from '@/config/config'
	import core from '@/core.js'
	import store from '@/store'
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				tablist: ['单人', '会议'],
				isMeetting: 0,
				ids: [],
				title: 'Hello',
				configs: configs,
				userList: [],
				id: ''
			}
		},
		computed: {
			...mapGetters(['user']),
		},
		onLoad() {
			this.userList = this.$bookData
		},
		methods: {
			sectionChange(index) {
				this.isMeetting = index
			},
			handleCall(type) {
				if (!this.id) {
					core.toast('请选择拨打账号')
					return
				}
				const user = this.userList.find(item => item.id == this.id)
				if (this.$nativeRtc.isUIKitEnable()) {
					if(type == 'voice'){
						this.$nativeRtc.startSingleVoiceCall({
							id: this.id,
						})
					}else{
						this.$nativeRtc.startSingleVideoCall({
							id: this.id,
						})
					}
					
				} else {
					uni.navigateTo({
						url: `/pages/liveKitSingle/index?chatid=${this.id}&type=${type}&name=${user.name}`
					})
				}
				

			},
			handleCalls(type) {
				if (!this.ids.length) {
					core.toast('请选择拨打账号')
					return
				}
				const user = this.userList.find(item => item.id == this.id)
				if (this.$nativeRtc.isUIKitEnable()) {
					let nativeFri = []
					this.userList.forEach(item => {
						if (this.ids.includes(item.id)) {
							const obj = {
								"id": item.id,
								"name": item.alias || item.name,
								// "logo": configs.avatarUrl + '/' + item.id + '.jpg'
							}
							nativeFri.push(obj)
						}
					})
					this.$nativeRtc.handleGroupMetting(nativeFri)
					
				} else {
					
					let nativeFri = []
					this.userList.forEach(item => {
						if (this.ids.includes(item.id)) {
							const obj = {
								"id": item.id,
								"name": item.alias || item.name,
							}
							nativeFri.push(obj)
						}
					})
					uni.navigateTo({
						url: `/pages/livekit/metting?type=quick&group=${JSON.stringify(nativeFri)}`
					})
					
				}

			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.content-top {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

	.name {
		margin-bottom: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.userList {
		width: 100%;
		padding: 0 30rpx;
		height: calc(100vh - 692rpx - 50px);
		overflow: auto;
	}

	.userTab {
		width: 100%;
		padding: 30rpx 100rpx;
	}
</style>